<template>
  <div>
    <van-row>
      <van-col class="icon" span="24">
        <van-image
          round
          width="2rem"
          height="2rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
      </van-col>
    </van-row>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      >
        <template #button>
          <van-button size="small" type="default">忘记密码</van-button>
        </template>
      </van-field>

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
      <van-row>
        <van-col @click="goRegister" class="gozc" span="24">没有账号，我要注册</van-col>
      </van-row>
    </van-form>

  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  computed: {
    ...mapState(['token','goodsList'])
  },
  methods: {
    ...mapMutations(['saveToken']),
    // 登录功能
    onSubmit(values) {
      console.log("submit", values);
      let account = this.username
      let password = this.password
      this.$axios.post("http://www.jiaoyisen.com:8887/api/login",{account,password})
      .then(res=>{
        console.log(res)
        console.log(res.data.message)
        let token = {
          username:this.username,
          password:this.password
        }
        this.saveToken(token)
        this.$router.push('./index')
      })
    },
    // 跳转注册
    goRegister(){
      this.$router.push('./register')
    }
  },
};
</script>

<style lang="scss" scoped>
.icon {
  padding: 1rem 0;
  text-align: center;
}
.gozc{
  margin-top: 3rem;
  font-size: .18rem;
  color: #68B0FF;
  text-align: center;
  text-decoration:underline
}
</style>